*{margin: 0px;padding: 0px;}
/*总的容器*/
.swiper-container {
	position: relative;
} 
/*音乐图标*/
.music_logo{
	position: absolute;
	right: 0px;top: 0px;
	z-index: 100;
	width: 80px;height: 80px;
    background: url(../images/small/music.gif) no-repeat;
    background-size: 100% 100%;
	@-webkit-keyframes zhuan{
        0%{
            transform:rotate(0deg);
        }
        50%{
 			transform:rotate(180deg);
        }
        100%{
 			transform:rotate(360deg);
        }
	}
	#music_click{
		max-width: 40px;max-height: 40px;
		display: block;
		line-height: 80px;margin: 0 auto;
		margin-top: 15px;
		transition:5s;
		// animation动画的各参数： 执行的动画名 执行的时长 反复执行 动画速度
		animation: zhuan 3s linear infinite;
	}
}

/*每页 */
.swiper-slide{
   overflow: hidden;
}

// 第一屏----------------------------------
.one{
	background: url(../images/bg/bg1.jpg) no-repeat;
	background-size: 100% 100%;
	.title{
		width: 80vw;height: 10vh;
		font-size: 12vw;
		text-align: center;line-height: 10vh;
		margin: 0 auto;margin-top: 15vh;
		color: white;
	}
	.content{
		width: 60vw;height: 60vw;
		// border: 1px solid white;
		margin: 0 auto;margin-top: 10vh;
		background: #E5E6E6;overflow: hidden;
		border-radius: 50%;
		.son{
			width: 50vw;height: 50vw;
			border-radius: 50%;
			background: #FFFFFF;
			margin: 0 auto;margin-top: 5vw;
			overflow: hidden;
			box-shadow: -5px 5px 5px 3px #ccc;
			span{
				display: block;
				width: 40vw;height: 20vw;
				color: #828282;
				margin: 0 auto;margin-top: 8vw;
				text-align: center;
				line-height: 20vw;
				font-size: 8vw;
				font-weight: 700;
			}
			hr{
				width: 30vw;
				margin: 0 auto;
			}
			p{
				width: 40vw;height: 20vw;
				color: #828282;
				font-size: 5vw;line-height: 6vw;
				margin: 0 auto;padding-top: 3vw;
				text-align: center;
			}
		}
	}
}
// 第二屏----------------------------------
.two{
	background: url(../images/bg/bg4.jpg) no-repeat;
	background-size: 100% 100%;
	.title{
		width: 100vw;height: 30vw;
		color:white; 
		text-align: center;margin: 0 auto;
		line-height: 20vw;margin-top: 18vw;
		font-size: 14vw;font-weight: 700;
	}
	.content{
		width: 100vw;height: 90vw;
		margin:0 auto;
		position: relative;
		li{
			width: 55vw;height: 55vw;
			border-radius: 50%;
			position: absolute;
			list-style: none;
			text-align: center;
			line-height: 55vw;
			color: white;
			font-size: 10vw;
		}
		.li1{
			left: 22.5vw;top:0vw;
			background: RGBA(240, 141, 144, 1);
		}
		.li2{
			left: 2vw;bottom: 0vw;
			background: RGBA(44, 60, 221, 0.6);
		}
		.li3{
			right: 2vw;bottom: 0vw;
			background: RGBA(95, 191, 96, 0.6);
		}
	}
}
// 第三屏----------------------------------
.three{
	// background:#62BCC3;
		background: url(../images/bg/bg3.jpg) no-repeat;
	    background-size: 100% 100%;
	.box{
		width: 100vw;height: 80vh;
		margin: 0 auto;margin-top: 10vh;
		li{
			width: 90vw;height: 25vw;
			margin: 0 auto;margin-bottom: 5vh;
			list-style: none;
			// overflow: hidden;
			.left{
				width: 60vw;height: 25vw;
				float: left;
				background:white;
				span{
					font-size: 4.5vw;color: #D24141;
					font-weight: 700;
					line-height: 10vw;margin-left: 5vw;
				}
				p{
					width: 50vw;height: 15vw;
					padding-left: 5vw;padding-right: 5vw;
					font-size: 4vw;color:#4B4949;
					font-weight:700;
					line-height: 6vw;text-indent: 5vw;
				}
			}
			.right{
				width: 25vw;
				position: absolute;
				right: -25vw;overflow: hidden;
  				border-radius: 5px;
			}
		}
	}
}
// 第四屏----------------------------------
.four{
	background: url(../images/bg/bg5.jpg) no-repeat;
	background-size: 100% 100%;
	.box{
		width: 90vw;height: 130vw;
		margin: 0 auto;
		margin-top: 15vw;
		position: relative;
		li{
			list-style: none;
			width: 40vw;height: 55vw;
			border-radius: 10%;
			position:absolute;
			img{
				width: 20vw;
				display: block;
				border-radius: 50%;
				margin: 0 auto;margin-top: 3vw;
			}
			h3{
				color:white;
				margin-left: 3vw;margin-top: 3vw;
			}
			p{
				color:#E7E9E9;font-size: 4vw;
				width: 40vw;line-height: 6vw;
				padding-left: 2vw;padding-right: 2vw;
				box-sizing: border-box;
				margin-top: 3vw;
			}
		}
		.li1{
			left: 0px;top: 0px;background:#EB5767;			
		}
		.li2{
			right: 0px;top: 0px;background:#A1D36E;
			img{
				// margin-left: 10vw;
			}
		}
		.li3{
			left: 0px;bottom: 0px;background:#AC94EA;
		}
		.li4{
			right: 0px;bottom: 0px;background:#56C1E7;
		}
		.circle{
			width: 40vw;height: 40vw;
			border: 1px solid white;
			background: white;
			border-radius: 50%;
			position: absolute;
			left: 25vw;top: 40vw;
			.circle_son{
				width: 35vw;height: 35vw;
				background: #FECD60;
				margin: 0 auto;
				margin-top: 1.5vw;
				border-radius: 50%;
				text-align: center;
				line-height: 35vw;
				color: #676767;
				font-size: 7vw;font-weight: 700;
				box-shadow: -5px 5px 5px 2px #ccc;
			}
		}
	}
}



